<template>
  <div class="game-list">
    <el-table
      :data="gameDataList"
      highlight-current-row
      :header-cell-style="{ background: '#FAFAFA' }"
      height="300"
      style="width: 100%"
    >
      <el-table-column prop="teamName" label="球队" />
      <el-table-column prop="idName" label="球员" />
      <el-table-column prop="playerNumber" label="号码" width="80" />
      <el-table-column label="位置">
        <template #default="scope">
          <span>{{
            scope.row.playerPosition == null ? "--" : scope.row.playerPosition
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <span>{{
            scope.row.playerStatus == null
              ? "--"
              : PlayerStatusEnumText[scope.row.playerStatus]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="禁赛状态">
        <template #default="scope">
          <span v-if="scope.row.suspendedStatus == null">--</span>
          <el-tag
            v-else-if="scope.row.suspendedStatus === 'normal'"
            effect="plain"
            >正常</el-tag
          >
          <el-tag v-else class="ml-2" type="danger">禁赛</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { PlayerStatusEnumText } from "../../../config/courseMock";
const props = defineProps<{
  gameDataList?: any;
}>();
</script>

<style lang="scss" scoped>
.game-list {
  height: 300px;
  overflow: auto;
  padding: 0px 30px;
}
</style>

